<template>
  <div class="xueyuan">
  <div class="p1"><p><i>&nbsp;</i> &nbsp;&nbsp;&nbsp;学员信息</p></div>
  <el-table
      :data="tableData"
      style="width: 470px; margin-left: 64px; margin-right: 66px;">
      <el-table-column
        label="顺序"
        width="50">
        <template slot-scope="scope"><span :class="'sp'+scope.row.i">{{ scope.row.i }}</span></template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="shouji"
        label="手机">
      </el-table-column>
            <el-table-column
        prop="qian"
        label="消费金额">
      </el-table-column>
            <el-table-column
        prop="lv"
        label="会员等级">
      </el-table-column>
      
    </el-table>
  </div>
</template>

<script>
export default {
      data() {
        return {
          tableData: [{
            i:1,
            name: '王小虎',
            shouji:18989898898,
            qian:2330.00,
            lv:3,
          }, {
            i:2,
            name: '王小虎',
            shouji:18989898898,
            qian:2330.00,
            lv:3,
          }, {
            i:3,
            name: '王小虎',
            shouji:18989898898,
            qian:2330.00,
            lv:3,
          }, {
            i:4,
            name: '王小虎',
            shouji:18989898898,
            qian:2330.00,
            lv:3,
          }, {
            i:5,
            name: '王小虎',
            shouji:18989898898,
            qian:2330.00,
            lv:3,
          }, {
            i:6,
            name: '王小虎',
            shouji:18989898898,
            qian:2330.00,
            lv:3,
          }]
        }
      }
    }

</script>

<style lang="less" scoped>
.xueyuan{
  height: 400px;
  width: 590px;
  background-color: #fff;
  overflow: hidden;
  margin-left: 10px;
  .p1{
    margin-left: 24px;
    margin-right: 22px;
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 16px;
    color:#438afe;
    font-weight: 700;
    i{
      background-color: #438afe;
    }
  }
}
/deep/ .el-table th.el-table__cell>.cell{
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  color: #333;
  font-weight: 700;
}
/deep/ .el-table td.el-table__cell div {
    text-align: center;
}
.sp1{
  background-color: rgb(255, 94, 0);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
}
.sp2{
  background-color: rgb(224, 154, 3);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
}
.sp3{
  background-color: rgb(255, 251, 0);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
}
</style>